<template>
  <div class="user-id-container">
    <p class="success-tip">
      注册成功，这个是你的用户ID：
      <span class="user-id" @click="copyId" title="点击复制" @mouseenter="hovered = true" @mouseleave="hovered = false">
        {{ userId }}
        <span v-if="hovered && !copied" class="copy-hover-tip">⧉</span>
      </span>
      <span v-if="copied" class="copy-tip">已复制</span>
      <span v-else="copied" class="copy-tip">点击复制</span>
    </p>
    <p class="warn-tip">请牢记你的用户ID，请妥善保管！</p>
    <a class="login-link" href="/login">前往登录</a>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import useNetStore from '../stores/net.js'
const userId = ref('')
const copied = ref(false)
const hovered = ref(false)
const net = useNetStore()
// 获取到地址栏中的参数
const route = useRoute()
const username = ref('')
username.value = route.query.username

net.fasong({
  username: username.value
}, '/users/userId').then(res => {
  if (res.code === 200) {
    userId.value = res.data.userId
  } else {
    alert(res.msg || '获取用户ID失败')
  }
}).catch(err => {
  console.log(err)
})

function copyId() {
  if (!userId.value) return
  navigator.clipboard.writeText(userId.value).then(() => {
    copied.value = true
    setTimeout(() => copied.value = false, 1200)
  })
}
</script>

<style scoped>
.user-id-container {
  max-width: 800px;
  min-height: 400px;
  margin: 100px auto;
  padding: 48px 36px 36px 36px;
  border-radius: 18px;
  background: #f7f7fa;
  box-shadow: 0 4px 32px 0 rgba(60, 60, 60, 0.10);
  text-align: center;
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}

.success-tip {
  font-size: 2.2rem;
  color: #3a3a3a;
  margin-bottom: 28px;
  font-weight: 700;
  letter-spacing: 1px;
}

.user-id {
  font-size: 2.6rem;
  color: #6c7a89;
  font-weight: bold;
  margin-left: 12px;
  letter-spacing: 2px;
  background: #eaeaea;
  padding: 6px 18px;
  border-radius: 8px;
  display: inline-block;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
}

.user-id:hover {
  background: #d6dde5;
}

.copy-hover-tip {
  position: absolute;
  left: 88%;
  top: 21%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: #888;  
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(100, 100, 100, 0.06);
  z-index: 2;
}

.copy-tip {
  font-size: 1.4rem;
  color: #000000;
  margin-left: 10px;
  transition: opacity 0.3s;
  display: inline-block;
  position: relative;
  left: 36%;
  top: -122px;
}

.warn-tip {
  color: #b26a00;
  font-size: 1.4rem;
  margin-bottom: 36px;
  font-weight: 500;
  letter-spacing: 1px;
}

.login-link {
  display: inline-block;
  padding: 16px 48px;
  background: #bfc8d8;
  color: #333;
  border-radius: 10px;
  font-size: 1.5rem;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s, color 0.3s;
  box-shadow: 0 2px 12px rgba(100, 100, 100, 0.08);
  letter-spacing: 2px;
}

.login-link:hover {
  background: #a5b1c2;
  color: #222;
}
</style>